<template>
    <div class="info">
        <page :top="0">
            <van-icon class="action_icon" @click="back()" :class="state.isShow ? 'noback' : ''" name="arrow-left" />
            <van-icon class="action_icon" :class="state.isShow ? 'noback' : ''" name="share-o" />
            <div class="back" :style="{ background: `rgba(255,255,255,${state.opacity})` }"></div>
            <van-tabs ref="tabs" :class="state.isShow ? 'show' : 'hidden'" fixed color="#ff5934" line-width="15"
                v-model:active="state.active" scrollspy sticky>
                <van-tab title="商品">
                    <swiper :list="state.info.wares_masterimg">
                        <template v-slot="{ item, index }">
                            <img @click="showBigImg(<string[]>state.info.wares_masterimg, index)" :src="item" alt="">
                        </template>
                    </swiper>

                    <div class="info_content">
                        <div class="title">{{ state.info.wares_title }}</div>
                        <div class="cont">{{ state.info.wares_info }}</div>
                        <div class="price">￥{{ state.info.wares_oldprice }}</div>
                    </div>

                    <van-row class="item">
                        <van-col span="6">已选</van-col>
                        <van-col span="12">全网公开版，碳纤黑，6+128...</van-col>
                        <van-col span="6">
                            <span>x1</span>
                            <van-icon name="arrow" />
                        </van-col>
                    </van-row>

                </van-tab>

                <van-tab title="详情">
                    <van-image @click="showBigImg(<string[]>state.info.wares_infoimg, index)"
                        v-for="item, index in state.info.wares_infoimg" :key="index" :src="item"></van-image>
                </van-tab>
            </van-tabs>
        </page>

        <van-action-bar>
            <van-action-bar-icon :color="state.isHavese"  @click="collect" icon="star-o" text="收藏" />
            <van-action-bar-icon :to="{ name: 'car' }" icon="cart-o" text="购物车" :badge="carArr.length" />
            <van-action-bar-button :disabled="state.isHave" type="warning" text="加入购物车" @click="addCarShop" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, reactive, ref, onUnmounted, getCurrentInstance } from "vue";
import { showImagePreview, showToast } from 'vant';
import { storeToRefs } from 'pinia'
import { info, addCar, checkCar,userlike } from "@/serve/_";
import { IndexType } from "@/types/res/home";
import { useRouterAction } from "@/utils/router";
import { useCarStore } from "@/state/car";

const tabs = ref()
const { carArr } = storeToRefs(useCarStore())
const { PostCarList } = useCarStore()
const { route ,back} = useRouterAction()

const state: {
    isHave: boolean,
    isHavese:string,
    active: number,
    opacity: number,
    isShow: boolean,
    info: IndexType,
    id: string
} = reactive({
    isHave: false,
    isHavese:"#323233",
    active: 0,
    opacity: 0,
    isShow: false,
    info: {},
    id: <string>route().query.id
})

onMounted(() => {
    // store.increment(200)
    // console.log("store: ",store.get_count);
    checkIsHave()
    PostCarList();
    window.addEventListener("scroll", rollBackground)
    getInfo()
})

onUnmounted(() => {
    window.removeEventListener("scroll", rollBackground)
})

let checkIsHave = async () => {
    state.isHave = (await checkCar({
        waresid: state.id
    })).isAddCar
    console.log("state.isHave: ", state.isHave);
}
// 添加购物车
let addCarShop = async () => {

    await addCar({
        waresid: state.id
    });
    state.isHave = true
    PostCarList();
    showToast('添加成功');

}

let getInfo = async () => {
    state.info = await info({
        id: state.id
    });
    console.log(state.info);
}

let showBigImg = (arr: string[], index: number) => {
    showImagePreview({
        images: arr,
        startPosition: index,
    });
}

const rollBackground = () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    state.opacity = scrollTop / 414
    if (state.opacity > 0.2) {
        state.isShow = true
        tabs.value.resize()
    } else {
        state.isShow = false
    }
}

const collect =async ()=>{
    let dd= await userlike({
        shopid:<string><unknown>state.info.wares_id
    })
    state.isHavese="#cdc30d"
    showToast('收藏成功');
}
</script>

  
<style lang="less" scoped>
@import "@page/Info.less";
</style>